import { useRef, useState } from "react";

/* 
受控表单绑定
思路:
state绑定到input的 value属性
把input最新的value值设置给state


获取dom元素
钩子函数 useRef
使用useRef先创建ref对象 
再去和节点绑定
当dom可用时 ref.current获取dom
渲染完成后可用

*/

function App() {
  const [value, setValue] = useState("");
  // 创建ref对象
  const inputRef = useRef(null);

  //使用dom元素
  const click = () => {
    console.log(inputRef.current);
  }


  return (
    <div className="app">
      <input
        value={value}
        ref={inputRef}
        onChange={(e) => setValue(e.target.value)}
      />
      <button onClick={click} >{'click me '} </button>
    </div>
  );
}

export default App;
